<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <button class="after">最后面增加元素</button>
    <button class="before">最前面增加元素</button>

    <ul>
        <li>第一个元素</li>
    </ul>

<script>
    const ul = document.querySelector("ul")

    const btn = document.querySelector(".after")
    const beforebtn = document.querySelector(".before")

    btn.addEventListener("click", function() {
        let newli = document.createElement("li")
        newli.textContent = "新的元素"
        ul.appendChild(newli)
    })

    beforebtn.addEventListener("click", function() {
        let newli = document.createElement("li")
        newli.textContent = "前面新的元素"
        ul.insertBefore(newli, ul.children[0])
    })
</script>
</body>
</html>